<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            font-size: 18px; /* 增大全局字体大小 */
        }

        h1 {
            text-align: center;
            font-size: 40px; /* 增大标题字体大小 */
            margin-bottom: 30px; /* 增大标题下方间距 */
        }

        form {
            max-width: 650px; /* 增大表单最大宽度 */
            margin: 0 auto;
            padding: 40px; /* 增大内边距 */
            background-color: #fff;
            border-radius: 15px; /* 增大边框圆角 */
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        form input[type="text"],
        form input[type="password"],
        form input[type="button"],
        form label {
            display: block;
            margin-bottom: 20px; /* 增大下方间距 */
        }

        form label {
            font-weight: bold;
            font-size: 24px; /* 增大标签字体大小 */
        }

        .radio-row {
            display: flex;
            align-items: center;
            margin-bottom: 5px; /* 增大下方间距 */
            margin-top: 25px;
        }

        .radio-row label {
            margin-right: 50px; /* 增大右侧间距 */
            font-size: 24px; /* 增大字体大小 */
        }

        .radio-row input[type="radio"] {
            margin-right: 10px; /* 调整单选按钮与文本间距 */
            width: 30px; /* 增大单选框尺寸 */
            height: 30px; /* 增大单选框尺寸 */
            cursor: pointer; /* 鼠标指针样式 */
        }

        form input[type="button"] {
            display: block;
            margin: 30px auto; /* 增大上下外边距 */
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 20px 40px; /* 增大内边距 */
            border-radius: 15px; /* 增大按钮圆角 */
            cursor: pointer;
            font-size: 24px; /* 增大字体大小 */
        }

        form input[type="button"]:hover {
            background-color: #0056b3;
        }

        .error-message {
            color: red;
            text-align: center;
            margin-top: 5px;
            font-size: 30px;
        }

        form input[type="text"],
        form input[type="password"] {
            width: 100%;
            padding: 15px; /* 增大内边距 */
            border: 2px solid #ccc; /* 增大边框宽度 */
            border-radius: 15px; /* 增大输入框圆角 */
            box-sizing: border-box;
            font-size: 24px; /* 增大字体大小 */
        }
    </style>
    <script>
        function verify(){
            var password1 = document.getElementById("password");
            var password2 = document.getElementById("password_again");
            if(password1.value !== password2.value){
                document.getElementById("errorMessage").innerHTML ="两次密码输入的不一致！";
                password1.value = "";
                password2.value = "";
                return 0;
            } else return 1;
        }

        function register(){
            var userName = document.getElementById("userName");
            var account = document.getElementById("account");
            var email = document.getElementById("email");
            var phone = document.getElementById("phone");
            var radio = document.getElementsByName("group");
            var roleId = document.getElementById("roleId");
            var password1 = document.getElementById("password");
            var password2 = document.getElementById("password_again");
            var errorMessage = document.getElementById("errorMessage");

            if(userName.value !== ""){
                if(account.value !== ""){
                    if(email.value !== ""){
                        if(phone.value !== ""){
                            if(password1.value !== ""){
                                if(password2.value !== ""){
                                    if(verify() !== 0){
                                        if(radio[0].checked){
                                            roleId.value = 0;
                                            document.getElementById("register").action = "/user/insert";
                                            document.getElementById("register").submit();
                                        } else if(radio[1].checked){
                                            roleId.value = 1;
                                            document.getElementById("register").action = "/user/insert"
                                            document.getElementById("register").submit();
                                        }
                                    }
                                }else {
                                    errorMessage.innerHTML = "确认密码不能为空！";
                                    return false;
                                }
                            } else {
                                errorMessage.innerHTML = "密码不能为空！"
                                return false;
                            }
                        } else {
                            errorMessage.innerHTML = "电话号码不能为空！"
                            return false;
                        }
                    } else {
                        errorMessage.innerHTML = "电子邮箱不能为空！"
                        return false;
                    }
                } else {
                    errorMessage.innerHTML = "用户账号不能为空！"
                    return false;
                }
            } else {
                errorMessage.innerHTML = "用户昵称不能为空！"
                return false;
            }
        }
    </script>
</head>
<body>
<h1>用户注册</h1>
<form id="register" name="form-register" method="post" enctype="application/x-www-form-urlencoded">
    <label for="userName">用户昵称：</label>
    <input id="userName" name="userName" type="text">

    <label for="account">用户账户：</label>
    <input id="account" name="account" type="text">

    <div class="radio-row">
        <label>用户类型：</label>
        <input type="radio" id="user" name="group" checked="true" value="0">
        <label for="user">普通用户</label>
        <input type="radio" id="administrator" name="group" value="1">
        <label for="administrator">管理员用户</label>
    </div>
    <input type="hidden" id="roleId" name="roleId">

    <label for="email">电子邮箱：</label>
    <input id="email" name="email" type="text">

    <label for="phone">电话号码：</label>
    <input id="phone" name="phone" type="text">

    <label for="password">用户密码：</label>
    <input id="password" name="password" type="password">

    <label for="password_again">确认密码：</label>
    <input id="password_again" name="password_again" type="password">

    <input type="button" value="提交注册" onclick="register()">

    <p id="errorMessage" class="error-message"></p>
</form>

</body>
</html>
